<template>
  <div class="createTemplate">
    <!-- 顶部按钮 -->
    <div class="topBtn">
      <div class="reback">
        <el-button type="primary" size="mini" round @click="rebackBtn">返回</el-button>
      </div>
      <div class="save">
        <el-button type="primary" size="small" round @click="saveData">保存</el-button>
      </div>
    </div>
    <!-- 操作区域 -->
    <div class="template">
      <!-- 左边 -->
      <div class="left">
        <el-tabs v-model="modelName" :before-leave="beforeChange">
          <el-tab-pane label="组件列表" name="first">
            <WidgetList :widgetList="widgetList" @onWidgetMouseDown="onWidgetMouseDown">
            </WidgetList>
          </el-tab-pane>
          <el-tab-pane label="定制组件列表" name="second">
            <CustomWidget :customWidgetList="customWidgetList" @onWidgetMouseDown="onWidgetMouseDown"></CustomWidget>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 中间 -->
      <div class="center">
        <!-- 模板信息 -->
        <div class="navInfo pointer" @click="showModelInfo">
          <div class="title">{{modelinfo.modelName}}</div>
          <div class="tips">模板操作提示 <i class="el-icon-warning"></i>
            <!-- 模板创建提示 -->
            <div class="tipsCon">
              <div>1.模板内海报位排序从"1"开始。</div>
              <div>2.模板示例图片可传可不传。</div>
              <div>3.此模板展示与EPG呈现无关。</div>
            </div>
          </div>
        </div>
        <!-- 操作间 -->
        <div class="panle" :style="bgImg!==''?{background:'url('+bgImg+')',backgroundSize:'cover',backgroundPosition:'center center'}:''">
          <div class="view" @click.stop @click.prevent @drop="onDrop" @dragover="dragOver">
            <VueDragResizezble class="item" ref="widget" v-for="(item,index) in modelList" :key="index"
              :w="item.style.w=='' || item.style.w < 10 ? 10 : parseInt(item.style.w/4*3)"
              :h="item.style.h=='' || item.style.h < 10 ? 10 : parseInt(item.style.h/4*3)"
              :x="item.style.x" :y="item.style.y" :active="false" :maxWidth="1133"
              @dragging="onDragging" @resizing="onResize" :parent="true" :debug="false"
              :snap="true" :snapTolerance="5" @refLineParams="getRefLineParams"
              @activated="selectType(item)">
              <WidgetListAll :com="item.com" :widgetData="item" :type="type"
                :bannerIndex="bannerIndex" @getAddImg='getAddImg' @getPreView='getPreView' @getDeleteItem='getDeleteItem'
                :bannerVideoIndex="bannerVideoIndex" @checkedTitle="checkedTitle"
                @configData="getConfigData">
              </WidgetListAll>
              <!-- <i @click.stop.prevent="deleteItem($event,index)" class="el-icon-error"></i> -->
              <i @mousedown.stop.prevent="deleteItem($event,index)" class="el-icon-error"></i>
            </VueDragResizezble>
            <!--辅助线STSRT-->
            <span class="ref-line v-line" v-for="(item,idx1) in vLine" :key="idx1 + 'a'" v-show="item.display"
              :style="{ left: item.position, top: item.origin, height: item.lineLength}">
            </span>
            <span class="ref-line h-line" v-for="(item,idx2) in hLine" :key="idx2 + 'b'" v-show="item.display"
              :style="{ top: item.position, left: item.origin, width: item.lineLength}">
            </span>
            <!--辅助线END-->
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <el-tabs v-model="activeName">
          <el-tab-pane label="模板配置" name="first">
            <ModelInfo :modelData="modelinfo" @toImage="initScreenShort"></ModelInfo>
          </el-tab-pane>
          <el-tab-pane v-if="isRight" label="组件设置" name="second">
            <WidgetAttrList :comData="propsData"></WidgetAttrList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
// 拖拽插件
import VueDragResizezble from '@/commont/plugins/draggable/vue-draggable-resizable';
import '@/commont/plugins/draggable/vue-draggable-resizable.css';
// 自定义截屏
import ScreenShot from "js-web-screen-shot";

// 组件
import WidgetList from '@/components/visualization/model/widgetList.vue'; //小组件列表
import CustomWidget from '@/components/visualization/model/customMadeWidget.vue'; //定制组件列表
import WidgetListAll from '@/components/visualization/model/widgetListAll.vue'; //组件列表
import WidgetAttrList from '@/components/visualization/model/widgetAttrList.vue'; //组件属性列表
import ModelInfo from '@/components/visualization/modelCommon/modelInfo.vue'; //模板信息

import {WIDGET_LIST,CUSTOM_WIDGET_LIST} from '@/commont/constants/config'; // 静态配置
let widgetX = 0;//当前组件的x位置
let widgetY = 0;//当前组件的y位置
let currentWidget = null;//当前组件
let index = 1;//轮播图的位置排序

export default {
  components: {
    VueDragResizezble,WidgetList,CustomWidget,WidgetListAll,WidgetAttrList,
    ModelInfo
  },
  props: {},
  data () {
    return {
      /****** 左边组件列表 ******/
      widgetList: WIDGET_LIST,
      customWidgetList: CUSTOM_WIDGET_LIST,
      modelName: "first",
      /****** 中间模板信息 ******/
      bgImg: require('../../../assets/modelBg.png'),//背景图
      type: 'widget',
      // 轮播海报
      bannerIndex: 0,
      // 轮播视频
      bannerVideoIndex: 0,
      modelList: [],
      vLine: [],
      hLine: [],
      /****** 右边属性值 ******/
      modelinfo: {
        modelName:'',
        modelType:'',
        modelBuss:'',
        modelPosi:2,
        modelSign:'',
        modelSignAdd:'',
        viewImg:'',
        modelDetails:''
      },
      activeName: "first",
      isRight: false,
      propsData: {},//属性值
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    /*********** 顶部 *************/
    // 返回
    rebackBtn(){
      this.$router.push('modelList');
    },
    // 保存
    saveData(){
      console.log('保存');
    },

    /*********** 左侧 *************/
    // 左边组件切换
    beforeChange(name){
      if(name == 'first'){
        this.isRight = false;
        this.activeName = "first";
      } else if(name == 'second'){
        this.isCustomData = false;
        this.activeName = "first";
      }
    },
    // 鼠标按下组件事件
    onWidgetMouseDown(e, widget){
      widgetX = e.offsetX;
      widgetY = e.offsetY;
      currentWidget = widget;
    },

    /*********** 中间 *************/
    // 展示模板信息
    showModelInfo(){
      this.activeName = "first";
      this.isRight = false;
      this.propsData = {};
      this.customData = {};
    },
    // 展示右边组件操作数据
    selectType(item){
      this.isRight = false;
      this.propsData = item;
      this.activeName = 'second';
      console.log('小组件属性值',this.propsData);
      this.$nextTick(() => this.isRight = true);
      if(item.type=='bannerBar'){
        if(item.value.length>0){
          item.defaultImg = item.value[0].url;
          this.bannerIndex = item.value[0].index;
        }
      } else if(item.type=='bannerVideo'){
        item.defaultImg = item.value[0].url;
        this.bannerVideoIndex = item.value[0].index;
      } else {
        this.bannerIndex = 0;
        this.bannerVideoIndex = 0;
      }
    },
    // 定制组件的属性配置
    getConfigData(e,item,items){
      e.preventDefault();//阻止默认事件
      e.stopPropagation();//阻止事件冒泡
      this.isRight = false;
      this.propsData = items;
      this.activeName = 'second';
      console.log('定制组件的属性配置',this.propsData);
      this.$nextTick(() => this.isRight = true);
    },
    // 添加轮播图
    getAddImg(val){
      val.value.push({index: index++, name: '', url: ''});
    },
    // 预览轮播图
    getPreView(e,item,index,data){
      e.preventDefault();//阻止默认事件
      e.stopPropagation();//阻止事件冒泡
      if(data.value[index].url==''){
        data.defaultImg = "";
      } else {
        data.defaultImg = data.value[index].url;
      }
      this.bannerIndex = item.index;
    },
    // 删除轮播图
    getDeleteItem(index,data){
      data.value.splice(index,1);
    },
    // 预览轮播视频
    checkedTitle(e,item,index,data){
      e.preventDefault();//阻止默认事件
      e.stopPropagation();//阻止事件冒泡
      if(data.value[index].url==''){
        data.defaultImg = "";
      } else {
        data.defaultImg = data.value[index].url;
      }
      this.bannerVideoIndex = item.index;
    },

    // 删除组件
    deleteItem(e,index){
      e.preventDefault();
      e.stopPropagation();
      this.modelList.splice(index,1);
      this.activeName = "first";
      this.isRight = false;
      this.propsData = {};
    },
    // 阻止默认事件
    dragOver(e){
      e.preventDefault();//阻止默认事件
      e.stopPropagation();//阻止事件冒泡
    },
    // 组件缩放调整大小
    onResize(x,y,w,h){
      this.propsData.style.w = parseInt(w/3*4);
      this.propsData.style.h = parseInt(h/3*4);
      this.propsData.style.x = x;
      this.propsData.style.y = y;
    },
    // 组件拖动时的位置
    onDragging(x,y){
      this.propsData.style.x = x;
      this.propsData.style.y = y;
    },
    // 辅助线回调事件
    getRefLineParams (params) {
      const { vLine, hLine } = params;
      this.vLine = vLine;
      this.hLine = hLine;
    },
    // 拖放结束
    onDrop(e){
      currentWidget.default.value = [];
      // 小组件
      if(this.modelName!='second'){
        if(currentWidget.type == 'textposter'){//文字海报
          currentWidget.default.value = [
            { index: 1, title:'文字海报', name:'', url:'' },
          ]
          this.modelList.push({
            type: currentWidget.type,
            label: currentWidget.label,
            com: currentWidget.component,
            commission: currentWidget.commission,
            style: {
              x: e.offsetX - widgetX,
              y: e.offsetY - widgetY,
              w: currentWidget.default.w,
              h: currentWidget.default.h,
            },
            value: currentWidget.default.value,
          })
        } else if(currentWidget.type == 'bannerBar'){//轮播海报
          index = 1;
          this.modelList.push({
            type: currentWidget.type,
            label: currentWidget.label,
            com: currentWidget.component,
            commission: currentWidget.commission,
            style: {
              x: e.offsetX - widgetX,
              y: e.offsetY - widgetY,
              w: currentWidget.default.w,
              h: currentWidget.default.h,
            },
            defaultImg:'',
            value: currentWidget.default.value,
          })
        } else if(currentWidget.type == 'bannerVideo'){//轮播视频
          currentWidget.default.value = [
            {index:1,name:'',url:'',title:'栏目一',},
            {index:2,name:'',url:'',title:'栏目二',},
            {index:3,name:'',url:'',title:'栏目三',},
            {index:4,name:'',url:'',title:'栏目四',},
          ];
          this.modelList.push({
            type: currentWidget.type,
            label: currentWidget.label,
            com: currentWidget.component,
            commission: currentWidget.commission,
            style: {
              x: e.offsetX - widgetX,
              y: e.offsetY - widgetY,
              w: currentWidget.default.w,
              h: currentWidget.default.h,
            },
            defaultImg:'',
            value: currentWidget.default.value,
          })
        } else if(currentWidget.type == 'bannerVideo1'){//轮播视频 —— 定制
          currentWidget.default.value = [
            {name:'',url:'',title:'轮播一',},
            {name:'',url:'',title:'轮播二',},
            {name:'',url:'',title:'轮播三',},
            {name:'',url:'',title:'轮播四',},
          ];
          this.modelList.push({
            type: currentWidget.type,
            label: currentWidget.label,
            com: currentWidget.component,
            commission: currentWidget.commission,
            style: {
              x: e.offsetX - widgetX,
              y: e.offsetY - widgetY,
              w: currentWidget.default.w,
              h: currentWidget.default.h,
            },
            index: currentWidget.default.index,
            value: currentWidget.default.value,
          })
        } else {
          currentWidget.default.value = [
            { index: 1, name:'', url:'' },
          ]
          this.modelList.push({
            type: currentWidget.type,
            label: currentWidget.label,
            com: currentWidget.component,
            commission: currentWidget.commission,
            style: {
              x: e.offsetX - widgetX,
              y: e.offsetY - widgetY,
              // ...currentWidget.default,  //es6 解构
              w: currentWidget.default.w,
              h: currentWidget.default.h,
            },
            value: currentWidget.default.value,
          })
        }
      }
      // 定制组件
      else {
        // 普通海报
        if(currentWidget.type=='rowThreeColPoster'){//1-3
          currentWidget.default.value = [
            { index: 1, name:'', url:'' },
            { index: 2, name:'', url:'' },
            { index: 3, name:'', url:'' },
          ]
        } else if(currentWidget.type=='rowSixColPoster'){//1-6
          currentWidget.default.value = [
            { index: 1, name:'', url:'' },
            { index: 2, name:'', url:'' },
            { index: 3, name:'', url:'' },
            { index: 4, name:'', url:'' },
            { index: 5, name:'', url:'' },
            { index: 6, name:'', url:'' },
          ]
        } else if(currentWidget.type=='rowTenColPoster'){//1-10
          currentWidget.default.value = [
            { index: 1, name:'', url:'' },
            { index: 2, name:'', url:'' },
            { index: 3, name:'', url:'' },
            { index: 4, name:'', url:'' },
            { index: 5, name:'', url:'' },
            { index: 6, name:'', url:'' },
            { index: 7, name:'', url:'' },
            { index: 8, name:'', url:'' },
            { index: 9, name:'', url:'' },
            { index: 10, name:'', url:'' },
          ]
        }
        // 文字海报
        else if(currentWidget.type=='rowTwoColText'){//1-2
          currentWidget.default.value = [
            { index: 1, title:'文字海报', name:'', url:'' },
            { index: 2, title:'文字海报', name:'', url:'' },
          ]
        } else if(currentWidget.type=='rowThreeColText'){//1-3
          currentWidget.default.value = [
            { index: 1, title:'文字海报', name:'', url:'' },
            { index: 2, title:'文字海报', name:'', url:'' },
            { index: 3, title:'文字海报', name:'', url:'' },
          ]
        } else if(currentWidget.type=='rowFourColText'){//1-4
          currentWidget.default.value = [
            { index: 1, title:'文字海报', name:'', url:'' },
            { index: 2, title:'文字海报', name:'', url:'' },
            { index: 3, title:'文字海报', name:'', url:'' },
            { index: 4, title:'文字海报', name:'', url:'' },
          ]
        } else if(currentWidget.type=='rowSixColText'){//1-6
          currentWidget.default.value = [
            { index: 1, title:'文字海报', name:'', url:'' },
            { index: 2, title:'文字海报', name:'', url:'' },
            { index: 3, title:'文字海报', name:'', url:'' },
            { index: 4, title:'文字海报', name:'', url:'' },
            { index: 5, title:'文字海报', name:'', url:'' },
            { index: 6, title:'文字海报', name:'', url:'' },
          ]
        }
        this.modelList.push({
          type: currentWidget.type,
          label: currentWidget.label,
          com: currentWidget.component,
          commission: currentWidget.commission,
          style: {
            x: e.offsetX - widgetX,
            y: e.offsetY - widgetY,
            w: currentWidget.default.w,
            h: currentWidget.default.h,
          },
          value: currentWidget.default.value,
        })
      }
      console.log("模板组件：",this.modelList);
    },

    /*********** 右侧 *************/
    // 模板自定义截屏
    initScreenShort() {
      if(this.modelinfo.viewImg!=""){
        this.$message({message:'已上传模板截图，若要重新上传请先删除！',type:'error'});
      } else {
        const screenShotHandler = new ScreenShot({
          enableWebRtc: false, // 是否启用webrtc，值为boolean类型，值为false则使用html2canvas来截图
          completeCallback: this.callback, //确认的回调函数
          closeCallback: this.closeFn, // 截图关闭回调函数
          level: 11, //截图的层级
          loadCrossImg: true, //允许图片跨域
        });
      }
    },
    //截图确认按钮回调函数
    callback(base64data) {
      // 截图路径 base64
      // console.log('图片路径：',base64data);
      requestModel({img:base64data},'screenshot').then(res =>{
        let {result_code, result_msg, data} = res;
        if(result_code == 0){
          this.modelinfo.viewImg = data;
          this.$message({message:'截图成功',type:'success'});
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    closeFn(e){
      console.log(e);
    },

  },
  filters: {},
}
</script>

<style lang="less" scoped>
.createTemplate {
  width: 100%;
  height: 100%;
  // 顶部按钮
  .topBtn{
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  // 操作区域
  .template{
    width: 100%;
    height: calc(100vh - 155px);
    margin-top: 15px;
    padding: 15px;
    background-color: #FFFFFF;
    display: flex;
    // 左边小组件
    .left{
      width: 260px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
    }
    // 中间面板
    .center{
      width: calc(100% - 700px);
      height: 100%;
      margin: 0 15px;
      box-shadow: 0px 2px 8px 0px #ccc;
      position: relative;
      .navInfo{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        transition: all .3s;
        padding: 10px 20px;
        border-bottom: 1px solid #cdcdcd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 16px;
        }
        .tips{
          color:#e6a23c;
          &:hover{
            .tipsCon {
              display: block;
            }
          }
        }
        // 模板操作提示
        .tipsCon{
          display: none;
          background: #fff;
          width: 255px;
          padding: 10px;
          border: 1px solid #cdcdcd;
          position: absolute;
          right: 0;
          top: 40px;
          z-index: 9;
        }
      }
      .panle{
        margin-top: 42px;
        height: calc(100% - 42px);
        background: linear-gradient(-90deg, rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px, linear-gradient(rgba(82, 82, 82, 0.1) 1px, transparent 1px) 0% 0% / 20px 20px;
        padding: 10px 15px 10px 15px;
        display: flex;
        justify-content: center;
        .view{
          width: 860px;
          height: 100%;
          border: 1px solid blue;
          position: relative;
          overflow-y: auto;
          overflow-x: hidden;
          .item{
            &:hover{
              cursor: pointer;
              transform: scale(0.99);
              border-radius: 2px;
              box-shadow: 0 0 3px #afafaf;
              .el-icon-error{
                display: block;
              }
            }
            div{
              // pointer-events: none; 解决JS鼠标事件穿透到子标签
            }
            .inner-widget{
              height: 100%;
              width: 100%;
            }
            .el-icon-error{
              position: absolute;
              right: -10px;
              top: -6px;
              color: red;
              font-size: 25px;
              cursor: pointer;
              display: none;
              z-index: 9999;
            }
          }
        }
      }
    }
    // 右边属性
    .right{
      width: 410px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 0px 2px 8px 0px #ccc;
    }
  }
}
</style>